<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit</title>
    <link rel="stylesheet" href="../static/css/submit.css">
    <script>
        function $(id) {
            return document.getElementById(id);
        }


        window.onload = function () {
            let age = $("age");
            let form = $("form");
            let grade = $("grade");
            let checkAge = function () {
                // 当失去焦点时判断
                let value = age.value;
                let ageInfo = $("age-info");
                // console.log(value);
                if (value === "") {
                    ageInfo.className = "wrong";
                    ageInfo.innerText = "内容不能为空";
                } else if (isNaN(value)) {
                    ageInfo.className = "wrong";
                    ageInfo.innerText = "请输入一个整数";
                } else if (value < 0 || value > 120) {
                    ageInfo.className = "wrong";
                    ageInfo.innerText = "请输入合适的年龄";
                } else {
                    ageInfo.className = "right";
                    ageInfo.innerText = "输入正确";
                }
            }
            let checkGrade = function () {
                // 当失去焦点时判断
                let value = grade.value;
                // console.log(value);
                let gradeInfo = $("grade-info");
                if (value === "") {
                    gradeInfo.className = "wrong";
                    gradeInfo.innerText = "内容不能为空";
                } else if (isNaN(value)) {
                    gradeInfo.className = "wrong";
                    gradeInfo.innerText = "请输入一个数字";
                } else if (value < 0 || value > 150) {
                    gradeInfo.className = "wrong";
                    gradeInfo.innerText = "请输入合适的成绩";
                } else {
                    gradeInfo.className = "right";
                    gradeInfo.innerText = "输入正确";
                }
            }
            age.onblur = checkAge;
            grade.onblur = checkGrade;
            form.check = function () {
                console.log("what");
                checkAge();
                checkGrade();
                if ($("grade-info").className !== 'right' || $("age-info").className !== 'right') {
                    return false;
                } else {
                    return true;
                }
            }
        }
    </script>
</head>
<body>
<form action="info.jsp" method="post" accept-charset="UTF-8" onsubmit="return check();" id="form">
    <div id="header">
        <h2>提交</h2>
    </div>
    <div id="body">
        <ul>
            <li>
                <label for="name">姓名:&nbsp;</label><input type="text" name="name" id="name">
            </li>
            <li>
                <label for="stu-id">学号:&nbsp;</label><input type="text" name="stu-id" id="stu-id">
            </li>
            <li>
                <label for="age">年龄:&nbsp;</label><input type="text" name="age" id="age"><span
                    id="age-info">请输入年龄</span>
            </li>
            <li>
                <label for="age">成绩:&nbsp;</label><input type="text" name="grade" id="grade"><span
                    id="grade-info">请输入成绩</span>
            </li>
        </ul>
        <input type="submit" id="submit" value="提交">
    </div>
</form>
</body>

</html>